<template>
	<view class="login-container">
		<!-- Logo区域 -->
		<view class="logo-container">
			<view class="logo-text">
				<text class="logo-char1">丸</text>
				<text class="logo-char2">通</text>
			</view>
			
		</view>
		
		<!-- 登录表单区域 -->
		<view class="login-form">
			<view class="form-header">
				<text class="form-title">登录系统</text>
			</view>
			

			<!-- 账号输入框 -->
			<view class="form-item">
				<u-input 
					v-model="username"
				 	placeholder="请输入账号"
				  	type="text"
				   	border="border"
					height="30"
				/>
			</view>

			<!-- 密码输入框 -->
			<view class="form-item">
				<u-input
					v-model="password"
					placeholder="请输入密码"
					type="password"
					border="border"
					height="30"
				/>
			</view>

			<!-- 登录按钮区域 -->
			<view class="form-item">
				<u-button
					:type="'primary'"
					:size="'medium'"
					:disabled="!canLogin || isLoading"
					@click="handleLogin"
					:loading="isLoading"
					class="login-btn"
				>登录</u-button>
				<u-button
					:type="'warning'"
					:size="'mini'"
					@click="gotoConfig"
					style="position: absolute; top: 0; right: 0;"
				>进入配置项</u-button>
			</view>

		</view>

		
		<!-- 提示组件 -->
		<u-toast ref="uToastRef" />
	</view>
	
</template>

<script setup>
	import { ref, computed } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { login } from '@/static/apis/wzry'

	// 表单数据
	const username = ref('')
	const password = ref('')
	const showPassword = ref(false)
	const isLoading = ref(false)
	const uToastRef = ref(null)

	// 计算属性：判断是否可以登录（账号和密码都不为空）
	const canLogin = computed(() => {
		return username.value.trim() !== '' && password.value.trim() !== ''
	})

	const gotoConfig = () => {
		uni.navigateTo({ url: "/pages/config/config" })
	}

	// 处理输入变化
	const handleInput = () => {
		// 输入变化时的逻辑，可用于实时验证等
	}

	// 处理登录
	const handleLogin = async () => {
		// 表单验证
		if (!username.value.trim()) {
			uToastRef.value.show({
				title: '请输入账号',
				type: 'error'
			})
			return
		}

		if (!password.value.trim()) {
			uToastRef.value.show({
				title: '请输入密码',
				type: 'error'
			})
			return
		}

		// 设置加载状态
		isLoading.value = true

		try {
			// 调用登录API
			const response = await login({
				username: username.value.trim(),
				password: password.value.trim()
			})

			// 打印完整响应数据
			console.log('登录成功，服务器返回数据：', response)

			// 显示成功提示
			uToastRef.value.show({
				title: '登录成功',
				type: 'success'
			})

			// 根据需求，暂不执行其他后续操作，保持在当前页面
			// 保存用户信息到本地
			uni.setStorageSync('userInfo', response.data)

			// 1秒后跳转到首页
			setTimeout(() => {
				uni.switchTab({
					url: '/pages/index/index'
				})
			}, 1000)
			
		} catch (error) {
			// 处理错误
			console.error('登录失败：', error)

			// 显示错误提示
			uToastRef.value.show({
				title: error.message || '登录失败，请稍后重试',
				type: 'error'
			})
		} finally {
			// 无论成功失败，都关闭加载状态
			isLoading.value = false
		}
	}

	// 页面加载时的逻辑
	onLoad(() => {
		// 可以在这里初始化一些数据或执行其他操作
	})
</script>

<style scoped lang="scss">
	// 主容器样式
	.login-container {
		width: 100%;
		min-height: 100vh;
		background-color: #fcfcfc;
		display: flex;
		flex-direction: column;
		padding: 0 30rpx;
		box-sizing: border-box;
		align-items: center;
	}

	// Logo容器样式
	.logo-container {
		margin-top: 80rpx;
		margin-bottom: 60rpx;
		text-align: center;
	}

	.logo-text {
		font-size: 80rpx;
		font-weight: bold;
		letter-spacing: 20rpx;
		text-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.logo-char1 {
		color: #ffd700; // 金色
		text-shadow: 0 4rpx 10rpx rgba(255, 215, 0, 0.3);
		position: relative;
	}

	.logo-char1::after {
		content: '';
		position: absolute;
		bottom: -10rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 60%;
		height: 4rpx;
		background-color: #00ff00;
		border-radius: 2rpx;
	}

	.logo-char2 {
		color: #00ff00; // 绿色
		text-shadow: 0 4rpx 10rpx rgba(0, 255, 0, 0.3);
	}

	// 表单容器样式
	.login-form {
		width: 100%;
		background-color: #ffffff;
		border-radius: 30rpx;
		padding: 50rpx 40rpx;
		box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.08);
		border: 2rpx solid rgba(255, 215, 0, 0.2);
	}

	// 表单头部
	.form-header {
		text-align: center;
		margin-bottom: 50rpx;
	}

	.form-title {
		font-size: 44rpx;
		font-weight: 600;
		color: #333333;
		position: relative;
	}

	.form-title::after {
		content: '';
		position: absolute;
		bottom: -20rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 100rpx;
		height: 6rpx;
		background: linear-gradient(90deg, #ffd700, #00ff00);
		border-radius: 3rpx;
	}

	// 表单项样式
	.form-item {
		margin-bottom: 40rpx;
		position: relative;
	}

	// 输入框样式调整
	:deep(.u-input) {
		border-radius: 15rpx;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
		input {
			font-size: 30rpx;
			padding: 25rpx;
			color: #333;
		}
	}

	// 登录按钮样式
	.login-btn {
		background: linear-gradient(135deg, #ffd700, #ffb300);
		color: #333;
		font-weight: bold;
		border-radius: 15rpx;
		box-shadow: 0 6rpx 20rpx rgba(255, 215, 0, 0.3);
		transition: all 0.3s ease;
	}

	.login-btn:active {
		box-shadow: 0 3rpx 10rpx rgba(255, 215, 0, 0.4);
		transform: translateY(2rpx);
	}


	.confirm-login-btn:active {
		box-shadow: 0 3rpx 10rpx rgba(0, 255, 0, 0.4);
		transform: translateY(2rpx);
	}

	// 按钮通用样式
	:deep(.u-button) {
		font-size: 34rpx;
		height: 96rpx;
		line-height: 96rpx;
		border: none;
	}

	// 响应式调整
	// 小屏幕设备（如iPhone 5/SE）
	@media screen and (max-width: 320px) {
		.login-form {
			padding: 30rpx 20rpx;
			margin-top: 20rpx;
		}
		
		.logo-text {
			font-size: 50rpx;
			letter-spacing: 10rpx;
		}
		
		.logo-container {
			margin-top: 60rpx;
			margin-bottom: 40rpx;
		}
		
		.form-title {
			font-size: 36rpx;
		}
		
		:deep(.u-button) {
			height: 80rpx;
			line-height: 80rpx;
			font-size: 30rpx;
		}
		
		.form-item {
			margin-bottom: 30rpx;
		}
	}

	// 中等屏幕设备（如大多数手机）
	@media screen and (min-width: 321px) and (max-width: 414px) {
		.login-form {
			padding: 40rpx 30rpx;
		}
		
		.logo-text {
			font-size: 70rpx;
			letter-spacing: 15rpx;
		}
	}

	// 平板和大屏设备
	@media screen and (min-width: 768px) {
		.login-form {
			max-width: 600rpx;
			margin: 0 auto;
			padding: 60rpx 50rpx;
		}
		
		.logo-text {
			font-size: 100rpx;
			letter-spacing: 30rpx;
		}
		
		.logo-container {
			margin-top: 120rpx;
			margin-bottom: 80rpx;
		}
		
		.form-title {
			font-size: 50rpx;
		}
		
		:deep(.u-button) {
			height: 100rpx;
			line-height: 100rpx;
			font-size: 36rpx;
		}
	}

	// 超大屏幕设备
	@media screen and (min-width: 1024px) {
		.login-container {
			max-width: 800px;
			margin: 0 auto;
			padding: 0 40rpx;
		}
		
		.login-form {
			max-width: 500rpx;
		}
	}
</style>
